<template>
      <div style="padding: 30px">
        <div style="float: left;">
          <div style="width: 200px;float: top;margin-left: 255px">
            <el-select v-model="goodstype" placeholder="请选择分类" style="margin-right: 150px; width: 150px">
              <el-option
                v-for="item in goodstypeData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="load">
              </el-option>
            </el-select>
          </div> 
          <div class="box-pie" style="height: 300px;width: 650px;float: left;" ref="chart"></div>
        </div>

      <div>
        <div style="float: top;margin-left: 3px">
          <el-input v-model="nameText" placeholder="请输入名字" style="width: 200px;margin-left: 215px" @keyup.enter.native="getThe"/>
          <el-button @click="getThe" size="small" type="primary" icon="el-icon-search" circle style="margin-left: 5px"></el-button>
          <el-button @click="reset" size="small" type="danger" icon="el-icon-delete" circle></el-button>
        </div>
        <div style="height: 300px;width: 650px;float: right;margin-top: 3px" ref="chart2"></div>
      </div>
      <div>
        <div style="height: 330px;width: 650px;margin-top:300px" ref="chart3"></div>
        <div style="height: 330px;width: 650px;margin-top:-300px;margin-left:660px" ref="chart4"></div>
      </div> 
    </div>
</template>

<script>

export default {
    name: "AnalysisManage",
    data(){
    return {
      chart:null,
      chart2:null,
      chart3:null,
      nameText:null,
      goodstypeData:[],
      goodstype:1,
      munber:0,
      // 配置可视化图形
      option1:  {
        title: {
          text: '出库量占比',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data:[],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      option2:{
        title: {
          text: '',
          subtext: '30天内物品出库数据',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line'
          }
        ]
      },
      option3:{
        title: {
          text: '七日增长率'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1', '2', '3', '4', '5', '6', '7']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '',
            type: 'line',
            stack: 'Total',
            data: []
          },
          {
            name: '',
            type: 'line',
            stack: 'Total',
            data: []
          },
          {
            name: '',
            type: 'line',
            stack: 'Total',
            data: []
          },
          {
            name: '',
            type: 'line',
            stack: 'Total',
            data: []
          },
          {
            name: '',
            type: 'line',
            stack: 'Total',
            data: []
          },
          {
            name: '',
            type: 'line',
            stack: 'Total',
            data: []
          }
        ]
      },
      option4:{
              title: {
                text: '明天预计出货数量',
                subtext: '',
                left: 'center'
              },
              xAxis: {
                type: 'category',
                data: []
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [],
                  type: 'bar',
                  label: {
                    show: true,
                    position: 'top',//在上方显示
                    textStyle: {//数值样式
                      fontSize: '12px',
                      color: '#999'
                    },
                  }
                }
              ]
            },
    }
  },
  mounted() {
    this.load(),
    this.loadGoodsType(),
    this.getPage1(),
    this.getPage2(),
    this.getPage3(),
    this.getPage4(),
    this.eConsole()

  },
  methods:{
    getThe(){
      this.$axios.get(this.$httpUrl+'/analysis/getOutThe?goodsname='+this.nameText).then(res=>res.data).then(res=>{
        console.log(res)
        if(res.code==400){
          this.$message.error('该商品不存在');
        }else{
          for(var i=0;i<res.data.length; i++){
                console.log(res.data)
                this.option2.xAxis.data[i]=(res.data[i].date);
                this.option2.series[0].data[i]=(res.data[i].value)
            }
            if(res.data.length<this.option2.series[0].data.length){
              for(var y=res.data.length;y<this.option2.series[0].data.length;y++){
                  this.option2.xAxis.data[y]=null;
                  this.option2.series[0].data[y]=null
              }
            }
            this.option2.title.text=res.data[0].name
            this.getPage2()

        //修改七日增长率
          this.$axios.get(this.$httpUrl+'/analysis/getOne?goodsname='+this.nameText).then(res=>res.data).then(res=>{           
            //清空
              console.log("接受到"+res.data)
              if(res.code!=400){
                for(var i=0;i<this.option3.series.length;i++){
                console.log("进入了清空")
                this.option3.series[i].name=""
                for(var j=0;j<7;j++){
                    this.option3.series[i].data[j]=0.00
                }
              }
              //设置
              for(var k=0;k<7;k++){
                    this.option3.series[0].data[k]=res.data[k].value[0]
              }
              this.getPage3();
              }  
          })
        }
        
        
      })
    },
    reset(){
      this.nameText="";
      for(var i=0;i<this.option2.xAxis.data.length; i++){
                this.option2.xAxis.data[i]=("");
                this.option2.series[0].data[i]=("res.data[i].value")
            }
      this.option2.title.text=null;
      this.getPage2()
      //七日同比
      // this.$axios.get(this.$httpUrl+'/analysis/getFive').then(res=>res.data).then(res=>{
      //       for(var i=0;i<res.data.length; i++){
      //           for(var j=0;j<res.data[i].value.length; j++){
      //               this.option3.series[i].data[j]=res.data[i].value[j]
      //           }
      //           this.option3.series[i].name=res.data[i].name
      //           // this.option3.xAxis.data[i]=res.data[i].date
      //           this.option3.legend.data[i]=res.data[i].name
      //       }
      //       this.getPage3();
      //   })
      this.$axios.get(this.$httpUrl+'/analysis/getFive1').then(res=>res.data).then(res=>{
            for(var i=0;i<res.data.length; i++){
                for(var j=0;j<res.data[i].value.length; j++){
                    this.option3.series[i].data[j]=res.data[i].value[j]
                }
                this.option3.series[i].name=res.data[i].name
                // this.option3.xAxis.data[i]=res.data[i].date
                this.option3.legend.data[i]=res.data[i].name
            }
            this.getPage3();
        })
    },
    ccc(param) { //添加点击事件
        console.log("点到了");
        console.log(param);
        this.chart.dispatchAction({ type: 'highlight', dataIndex: param.dataIndex }); //激活点击区域高亮
        if (param.dataIndex !== this.number) { // 当鼠标点击的时候 消除上一个扇区的高亮
            this.chart.dispatchAction({ type: 'downplay', dataIndex: this.number });
        }
        this.number = param.dataIndex //接住当前扇区的dataIndex
        //获取goodsid
        this.$axios.get(this.$httpUrl+'/analysis/getOut?goodsid='+param.data.goodsid).then(res=>res.data).then(res=>{
            console.log(this.option2.series[0].data.length)
            for(var i=0;i<res.data.length; i++){
                  this.option2.xAxis.data[i]=(res.data[i].date);
                  this.option2.series[0].data[i]=(res.data[i].value) 
            }
            if(res.data.length<this.option2.series[0].data.length){
              for(var y=res.data.length;y<this.option2.series[0].data.length;y++){
                  console.log("进来了")
                  this.option2.xAxis.data[y]=null;
                  this.option2.series[0].data[y]=null
              }
            }
            console.log(this.option2.series[0].data.length)
            this.option2.title.text=param.data.name
            this.getPage2()
        })
    },
    getPage1() {
      // 引用chart并初始化
      this.chart = this.$echarts.init(this.$refs.chart);
      // 使用刚指定的配置项和数据显示图表。
      this.chart.setOption(this.option1);
    },
    getPage2() {
      this.chart2 = this.$echarts.init(this.$refs.chart2);
      this.chart2.setOption(this.option2);
    },
    getPage3() {
      this.chart3 = this.$echarts.init(this.$refs.chart3);
      this.chart3.setOption(this.option3);
    },
    getPage4() {
      this.chart4 = this.$echarts.init(this.$refs.chart4);
      this.chart4.setOption(this.option4);
    },
    eConsole() {
        this.chart.on('click',this.ccc)
    },
    loadGoodsType(){
        this.$axios.get(this.$httpUrl+'/goodstype/list').then(res=>res.data).then(res=>{
          console.log(res)
          if(res.code==200){
            this.goodstypeData=res.data;
          }else{
            alert('获取数据失败')
          }
        })
      },
    load(){
      this.$axios.get(this.$httpUrl+'/analysis/getsix?goodstype='+this.goodstype).then(res=>res.data).then(res=>{
            console.log(res)
            for(var i=0;i<res.data.length; i++){
                this.option1.series[0].data[i]=({"value":res.data[i].value,"name":res.data[i].name,"goodsid":res.data[i].goodsid});
            }
            if(res.data.length<this.option1.series[0].data.length){
              console.log("进入饼图清空")
              for(var j=res.data.length;j<this.option1.series[0].data.length; j++){
                this.option1.series[0].data[j]=(null);
                console.log("清空了"+j)
            }
            }
            this.getPage1();
            this.getPage2();
            this.eConsole();  
        }),
          this.$axios.get(this.$httpUrl+'/analysis/getFive1?goodstype='+this.goodstype).then(res=>res.data).then(res=>{
            for(var i=0;i<res.data.length; i++){
                for(var j=0;j<res.data[i].value.length; j++){
                    this.option3.series[i].data[j]=res.data[i].value[j]
                }
                this.option3.series[i].name=res.data[i].name
                // this.option3.xAxis.data[i]=res.data[i].date
                this.option3.legend.data[i]=res.data[i].name
            }
            if(res.data.length<this.option3.series.length){
              for(var k=res.data.length;k<this.option3.series.length;k++){
                console.log("进入了清空")
                this.option3.series[k].name=""
                for(var z=0;z<7;z++){
                    this.option3.series[k].data[z]=0.00
                }
              }
            }
            this.getPage3();
        }),
        this.$axios.get(this.$httpUrl+'/analysis/getTomorrow?goodstype='+this.goodstype).then(res=>res.data).then(res=>{
            for(var i=0;i<res.data.length; i++){
                this.option4.xAxis.data[i]=(res.data[i].name);
                this.option4.series[0].data[i]=(res.data[i].value)
            }
            if(res.data.length<this.option4.xAxis.data.length){
              for(var j=res.data.length;j<this.option4.xAxis.data.length; j++){
                this.option4.xAxis.data[j]=("");
                this.option4.series[0].data[j]=(null)
            }
            }
            this.getPage4()
        })  
    }  
  }

};
</script>

<style scoped>

</style>
